<template>
  <div class="index" slot="body">
    <Header></Header>

    <el-card class="box-card">
      <el-tabs v-model="category_type">
        <el-tab-pane label="技术" name="a">
          <el-row v-for="i in category_list" :key="i" style="margin-top: 15px">
            <el-col :span="2" style="font-weight: bold;">{{Object.keys(i)[0]}}</el-col>
            <el-col :span="3" v-for="j in i[Object.keys(i)[0]]" :key="j" style="font-size: 13px;color: #606266;margin-top: 5px">
              {{j}}
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="产品" name="b">产品</el-tab-pane>
        <el-tab-pane label="设计" name="c">设计</el-tab-pane>
        <el-tab-pane label="市场" name="d">市场</el-tab-pane>
        <el-tab-pane label="销售" name="e">销售</el-tab-pane>
        <el-tab-pane label="教育" name="f">教育</el-tab-pane>
        <el-tab-pane label="旅游" name="g">旅游</el-tab-pane>
        <el-tab-pane label="服务" name="h">服务</el-tab-pane>
        <el-tab-pane label="服务" name="i">服务</el-tab-pane>
        <el-tab-pane label="采购" name="j">采购</el-tab-pane>
        <el-tab-pane label="其他" name="k">其他</el-tab-pane>
      </el-tabs>
    </el-card>

    <el-card class="box-card" id="recommend">
      <div slot="header" class="clearfix" style="text-align: center">
        <span style="color: #F56C6C;font-weight: bold;font-size: 22px"><i class="el-icon-star-on"></i>为您推荐</span>
      </div>
      <el-row :gutter="12">
        <el-col :span="6" v-for="(i,index) in recommend_list" :key="index" v-if="index<2" class="text-card">
          <el-card>
            <div @click="job_detail(i.id)" style="cursor: pointer">
              <el-row>
                <el-col
                  style="max-width: 150px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 16px"
                  :span="18">
                  <span>{{i.title}}</span>
                </el-col>
                <el-col :span="6"><span style="color: #F56C6C;margin-left: 50px;font-size: 18px">{{i.money}}</span></el-col>
              </el-row>
              <el-row style="margin-top: 8px">
<!--                <el-col :span="24"-->
<!--                        style="font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #606266;">-->
<!--                  哇啦软件开发-->
<!--                </el-col>-->
              </el-row>
              <el-row style="margin-top: 8px">
                <el-col :span="8"><span style="color: #909399;font-size: 13px;">{{i.addr}}</span></el-col>
                <el-col :span="16"><span style="color: #909399;font-size: 13px;float: right">{{i.experience}}|{{i.education}}</span></el-col>
              </el-row>
            </div>

            <div class="my-br" style="margin: 10px 0px"></div>

            <div @click="company_detail(i)" style="cursor: pointer">
              <el-row>
                <el-col :span="14" style=";overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                  <span style="color: #409EFF">{{i.company}}</span>
                </el-col>
                <el-col :span="10"><span style="color: #909399;font-size: 13px;float: right">[{{i.createTime}}发布]</span>
                </el-col>
              </el-row>
              <el-row
                style="max-width: 250px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-top: 8px;font-size: 13px">
                <span style="color: #606266;"></span>
              </el-row>
            </div>

          </el-card>
        </el-col>
      </el-row>
      <el-divider>
        <router-link to="/recommend" style="color: #67C23A;font-size: 20px">
          <i class="el-icon-caret-left"></i>查看更多<i class="el-icon-caret-right"></i>
        </router-link>
      </el-divider>
    </el-card>

    <el-card class="box-card" id="hot_job">
      <div slot="header" class="clearfix" style="text-align: center">
        <span style="color: #E6A23C;font-weight: bold;font-size: 22px"><i class="el-icon-s-claim"></i> 热门职位</span>
      </div>
      <el-row :gutter="12">
        <el-col :span="6" v-for="(i,index) in job_list" :key="index" v-if="index<4" class="text-card">
          <el-card>

            <div @click="job_detail(i.id)" style="cursor: pointer">
              <el-row>
                <el-col
                  style="max-width: 150px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 16px"
                  :span="18"><span>{{i.title}}</span></el-col>
                <el-col :span="6">
                  <span style="color: #F56C6C;margin-left: 50px;font-size: 18px">{{i.money}}</span></el-col>
              </el-row>
              <el-row style="margin-top: 8px">
                <el-col :span="24"
                        style="font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #606266;">
                  {{i.remark}}
                </el-col>
              </el-row>
              <el-row style="margin-top: 8px">
                <el-col :span="8"><span style="color: #909399;font-size: 13px;">{{i.addr}}</span></el-col>
                <el-col :span="16"><span style="color: #909399;font-size: 13px;float: right">{{i.experience}}|{{i.education}}</span>
                </el-col>
              </el-row>
            </div>

            <div class="my-br" style="margin: 10px 0px"></div>

            <div @click="company_detail(i)" style="cursor: pointer">
              <el-row>
                <el-col :span="14" style=";overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"><span
                  style="color: #409EFF">{{i.company}}</span></el-col>
                <el-col :span="10"><span style="color: #909399;font-size: 13px;float: right">{{i.createTime}}</span>
                </el-col>
              </el-row>
<!--              <el-row-->
<!--                style="max-width: 250px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-top: 8px;font-size: 13px">-->
<!--                <span style="color: #606266;">哇啦管理</span></el-row>-->
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-divider>
        <router-link to="/job" style="color: #67C23A;font-size: 20px">
          <i class="el-icon-caret-left"></i>查看更多<i class="el-icon-caret-right"></i>
        </router-link>
      </el-divider>
    </el-card>

    <el-card class="box-card" id="hot_company">
      <div slot="header" class="clearfix" style="text-align: center">
        <span style="color: #409EFF;font-weight: bold;font-size: 22px"><i
          class="el-icon-office-building"></i> 热门公司</span>
      </div>
      <el-row :gutter="12">
        <el-col :span="8" v-for="i in company_list" :key="i" class="text-card">
          <el-card @click.native="company_detail(i)" style="cursor: pointer">
            <el-row>
              <el-col :span="10">
                <img :src="i.picture" alt="" style="width: 80px;height: 80px">
              </el-col>
              <el-col :span="14">
                <el-row style="margin-bottom: 10px"><span style="font-size: 18px">{{i.companyName}}</span></el-row>
                <el-row><span style="color: #909399">{{i.financing}}|互联网</span></el-row>
                <el-row style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{i.remark}}</el-row>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <el-divider>
        <router-link to="/company" style="color: #67C23A;font-size: 20px">
          <i class="el-icon-caret-left"></i>查看更多<i class="el-icon-caret-right"></i>
        </router-link>
      </el-divider>
    </el-card>

    <Footer></Footer>
  </div>
</template>

<script>
  import Header from './Header'
  import Footer from './Footer'
  import BMap from 'BMap'

  export default {
    name: 'Index',
    components: {Header, Footer},
    created () {
      this.$axios.post('http://localhost:8081/job/selectByJob', {
        'tag': 1,
      }).then((res) => {
        const result = res.data
        this.recommend_list = result.data.reverse()
      })
      this.$axios.post('http://localhost:8081/job/selectByJob', {}).then((res) => {
        const result = res.data
        if (result.code === '1') {
          this.job_list = result.data
        } else if (result.code === '0') {
          this.$message({message: result.msg, type: 'warning'})
        } else {
          this.$message.error(result.msg)
        }
      })
      this.$axios.post('http://localhost:8081/company/selectByCompany', {"auditStatus":1}).then((res) => {
        const result = res.data
        if (result.code === '1') {
          this.company_list = result.data
        } else if (result.code === '0') {
          this.$message({message: result.msg, type: 'warning'})
        } else {
          this.$message.error(result.msg)
        }
      })
    },
    data () {
      return {
        category_type: 'a',
        category_list: [
          {'后端开发': ['Java', 'PHP', 'C', "Python", "C++", ".NET"]},
          {'前端开发': ["HTML/CSS", "Bootstrap", "Vue", "React", "JQuery"]},
          {'移动开发': ["WEUI", "Android", "iOS", "HTML5"]},
          {'数据库': ["MySQL", "PLSQL", "Oracle", "MongoDB", "SQL", "Neo4j"]},
        ],
        recommend_list: [
          {
            'id': '',
            'title': '后端工程师-飞书人力套件',
            'remark': '',
            'money': '15k-25k',
            'addr': '北京',
            'education': '本科及以上',
            'experience': '3-5年',
            'company': ' 北京字节跳动',
            'createTime': '2022-01-20'
          },
          {
            'id': '',
            'title': 'Java开发工程师',
            'remark': '联奕',
            'money': '6-9K',
            'addr': '广州',
            'education': '专科及以上',
            'experience': '经验不限',
            'company': '联奕科技',
            'createTime': '2022-01-20'
          },
          {
            'id': '',
            'title': '【应届生】Java服务端开发工程师',
            'remark': '喜欢就快来吧',
            'money': '5-8K',
            'addr': '广州',
            'education': '学历不限',
            'experience': '经验不限',
            'company': '漫灵游戏',
            'createTime': '2022-03-01'
          },
        ],
        job_list: [],
        company_list: []
      }
    },
    methods: {
      job_detail (id) {
        this.$router.push({path: 'job_detail', query: {id: id}})
      },
      company_detail (id) {
        this.$router.push({path: 'company_detail', query: {id: id}})
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .text-card {
    font-size: 15px;
    padding: 6px 0px;
  }

</style>
